<!--分类内容-->
<template>
    <div class="fenlei_tab">
      <ul>
        <li v-for="item in tabList" :key="item.fenleiTabId">
          <router-link :to="{name: 'FenleiXq', params: { fenleiTabId: item.fenleiTabId ,fenleixqId: 'all'} }" class="fenleitab_name">
            <span>{{item.fenleiTabName}}</span>
          </router-link>
          <div class="fenleixq_box">
            <router-link :to="{name: 'FenleiXq', params: {fenleiTabId: item.fenleiTabId, fenleixqId: list.fenleixqId } }" v-for="list in item.fenleixqList" :key="list.fenleixqId">{{list.fenleixqName}}</router-link>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
  import eventVue from '@/assets/eventVue.js'
  export default {
    data () {
      return {
        tabList: ''
      }
    },
    mounted () {
      eventVue.$on('myFun', (msg) => {
        this.tabList = msg
      })
    }
  }
</script>


<style scoped>
.fenlei_tab ul li{
  background: #fff;
  margin-bottom: 14px;
}
.fenlei_tab ul li .fenleitab_name{
  display: block;
  height: 55px;
  margin:0 18px;
  line-height: 55px;
  border-bottom: 1px solid #f4f4f4;
  background: url(/static/img/arr_right_gray.jpg) no-repeat right center;
  background-size: 8px 13px;
}
.fenlei_tab ul li .fenleitab_name span{
  font-size:18px;
  color:#666;
  border-left:6px solid #f60;
 padding-left: 9px;
}
.fenlei_tab ul li .fenleixq_box{
  padding:18px;
}
.fenlei_tab ul li .fenleixq_box a{
  display: inline-block;
  width: 24%;
  height: 36px;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
  color:#999;
}
</style>
